<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" 
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<f:view>
<f:loadBundle var="text" basename="#{signupForm.bundleName}"/>
<h:head>
    <title>#{text['signup.title']}</title>
    <meta name="heading" content="#{text['signup.heading']}"/>
</h:head>
<body id="signup">

<div class="span2">
    <h2>#{text['signup.heading']}</h2>
    #{text['signup.message']}
</div>
<div class="span7">

<h:form id="signupForm" styleClass="well form-horizontal" autocomplete="off">

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="username" value="#{text['user.username']}"/>
        <div class="controls">
            <h:inputText value="#{signupForm.user.username}" id="username" required="true"/>
            <p:message for="username" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="password" value="#{text['user.password']}"/>
        <div class="controls">
            <h:inputSecret value="#{signupForm.user.password}" id="password"
                redisplay="true" required="true"/>
            <p:message for="password" />
        </div>
    </div>
    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="confirmPassword" value="#{text['user.confirmPassword']}"/>
        <div class="controls">
            <h:inputSecret value="#{signupForm.user.confirmPassword}" id="confirmPassword"
                redisplay="true" required="true">
                <!--p:validateEqual for="password"/-->
            </h:inputSecret>
            <p:message for="confirmPassword" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="passwordHint" value="#{text['user.passwordHint']}"/>
        <div class="controls">
            <h:inputText value="#{signupForm.user.passwordHint}" id="passwordHint" required="true"/>
            <p:message for="passwordHint" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="firstName" value="#{text['user.firstName']}"/>
        <div class="controls">
            <h:inputText id="firstName" value="#{signupForm.user.firstName}" maxlength="50" required="true"/>
            <p:message for="firstName" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="lastName" value="#{text['user.lastName']}"/>
        <div class="controls">
            <h:inputText value="#{signupForm.user.lastName}" id="lastName" maxlength="50" required="true"/>
            <p:message for="lastName" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="email" value="#{text['user.email']}"/>
        <div class="controls">
            <h:inputText value="#{signupForm.user.email}" id="email" required="true"/>
            <p:message for="email" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="phoneNumber" value="#{text['user.phoneNumber']}"/>
        <div class="controls">
            <h:inputText value="#{signupForm.user.phoneNumber}" id="phoneNumber" styleClass="text medium">
                <f:validateRegex pattern="^\(?(\d{3})\)?[-| ]?(\d{3})[-| ]?(\d{4})$"/>
            </h:inputText>
            <p:message for="phoneNumber" />
        </div>
    </div>

    <div class="control-group">
        <h:outputLabel styleClass="control-label" for="website" value="#{text['user.website']}"/>
        <div class="controls">
            <h:inputText value="#{signupForm.user.website}" id="website" required="true"/>
            <p:message for="website" />
        </div>
    </div>

    <fieldset>
        <legend class="accordion-heading">
            <a data-toggle="collapse" href="#collapse-address"><h:outputText value="#{text['user.address.address']}"/></a>
        </legend>
        <div id="collapse-address" class="accordion-body collapse">
            <div class="control-group">
                <h:outputLabel styleClass="control-label" for="address" value="#{text['user.address.address']}"/>
                <div class="controls">
                    <h:inputText value="#{signupForm.user.address.address}" id="address"/>
                    <p:message for="address" />
                </div>
            </div>
            <div class="control-group">
                <h:outputLabel styleClass="control-label" for="city" value="#{text['user.address.city']}"/>
                <div class="controls">
                    <h:inputText value="#{signupForm.user.address.city}" id="city"/>
                    <p:message for="city" />
                </div>
            </div>
            <div class="control-group">
                <h:outputLabel styleClass="control-label" for="province" value="#{text['user.address.province']}"/>
                <div class="controls">
                    <h:inputText value="#{signupForm.user.address.province}" id="province"/>
                    <p:message for="province" />
                </div>
            </div>
            <div class="control-group">
                <h:outputLabel styleClass="control-label" for="postalCode" value="#{text['user.address.postalCode']}"/>
                <div class="controls">
                    <h:inputText value="#{signupForm.user.address.postalCode}" id="postalCode">
                        <f:validateRegex pattern="^\d{5}\d*$"/>
                    </h:inputText>
                    <p:message for="postalCode" />
                </div>

            </div>
            <div class="control-group">
                <h:outputLabel styleClass="control-label" for="country" value="#{text['user.address.country']}"/>
                <div class="controls">
                    <h:selectOneMenu value="#{signupForm.country}" id="country">
                        <f:selectItems value="#{signupForm.countries}"/>
                    </h:selectOneMenu>
                    <p:message for="country" />
                </div>
            </div>
        </div>
    </fieldset>

    <div class="form-actions">
        <h:commandButton value="#{text['button.register']}" action="#{signupForm.save}" id="save" styleClass="btn btn-primary"/>
        <h:commandButton value="#{text['button.cancel']}" action="cancel" immediate="true" id="cancel" styleClass="btn"/>
    </div>
</h:form>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("input[type='text']:visible:enabled:first", document.forms['signupForm']).focus();
    });
</script>

</body>
</f:view>
</html>